import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from "react-router-dom";
import Films from "../routerTest/views/films";
import Cinema from "../routerTest/views/cenima";
import notFound from "../routerTest/views/notFound";
import Detail from "../routerTest/views/Detail";
import Login from "../routerTest/views/Login";

// HashRouter 是带有#号的
// BrowserRouter 不带#号,会真正发起后端请求,且需要后端配置对应的路径,否则报404

function isAuth() {
  return localStorage.getItem("token");
}
export default class IndexRouter extends Component {
  render() {
    return (
      <div>
        <Router>
          {this.props.children}
          <Switch>
            {/* <Route path="/films" component={Films}></Route> */}
            {/* react路由拦截 类似vue的befoeEach */}
            <Route
              path="/films"
              render={() => {
                return isAuth() ? <Films /> : <Redirect to="/login"></Redirect>;
              }}
            ></Route>
            <Route path="/cinema" component={Cinema}></Route>
            <Route path="/login" component={Login}></Route>

            {/* 动态路由方式 */}
            {/* <Route path="/detail/:id" component={Detail}></Route> */}

            {/* query传参和state传参 */}
            <Route path="/detail" component={Detail}></Route>
            {/* 默认是模糊匹配 精确匹配 加exact */}
            <Redirect from="/" to="/films" exact></Redirect>
            {/* 不写path 表示没有匹配到对应的页面 */}
            <Route component={notFound}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}
